<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
		<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入vuex -->
		<script src="https://unpkg.com/vuex@3.0.0">
		</script>
	</head>
	<body>
		<div id="app" class="main">
			<div id="" @click="clickNum">
				count:{{$store.state.count}}
			</div>
			<div id="" @click="clickNum">
				count getter:{{$store.getters.countGetter}}
			</div>
			<div id="" @click="clickNumAsync">
				actions,延迟1s
			</div>
		
			<div class="an-wrap">
				<div id="cell9" class="cell cell9">
					<p>9</p>
				</div>
				<div id="cell8" class="cell cell8">
					<p>8</p>
				</div>
				<div id="cell7" class="cell cell7">
					<p>7</p>
				</div>
				<div id="cell6" class="cell cell6">
					<p>6</p>
				</div>
				<div id="cell5" class="cell cell5">
					<p>5</p>
				</div>
				<div id="cell4" class="cell cell4">
					<p>4</p>
				</div>
				<div id="cell3" class="cell cell3">
					<p>3</p>
				</div>
				<div id="cell2" class="cell cell2">
					<p>2</p>
				</div>
				<div id="cell1" class="cell cell1">
					<p>1</p>
				</div>
			</div>

			<div class="ct-wrap">
				<div type="button" id="autoNextStep" class="button-blue" @click="autoNextStep">
					<!-- <div class=""> -->
					自动
					<!-- </div> -->
				</div>
				<div type="button" class="button-green" @click="nextStep">
					<!-- <div class=""> -->
					下一步
					<!-- </div> -->
				</div>
				<div type="button" class="button-orange" @click="reset">
					<!-- <div class=""> -->
					重置
					<!-- </div> -->
				</div>
			</div>
		</div>
	</body>
	<link rel="stylesheet" type="text/css" href="./merge_sort.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/control.css" />
	<script type="text/javascript" src="./merge_sort.js"></script>
	<!-- <script type="text/javascript" src="./vuex.js"></script> -->

</html>
